<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./icon/iconfont.css" />
    <link rel="stylesheet" href="./css/style.css" />
</head>

<body>
    <header>
        <div class="header-nav">
            <div class="header-left">
                <span class="header-left-c1">mjau</span>
                <span class="header-left-c2">mjau</span>
            </div>
            <div class="header-right">
                <div class="right-nav">
                    <span>Blog</span><span class="iconfont icon-xiangxia"></span>
                </div>
                <div class="right-nav">
                    <span>Concepts</span><span class="iconfont icon-xiangxia"></span>
                </div>
                <div class="right-nav">
                    <span>About</span>
                </div>
                <div class="right-nav menu">
                    <div>
                        <span>Contact</span><span class="iconfont icon-xiangxia"></span>
                    </div>
                    <form action="">
                        <div class="menu-content">
                            <div class="menu-input">
                                <input type="text" name="" id="" placeholder="Name"/>
                            </div>
                            <div class="menu-input">
                                <input type="email"  placeholder="Email"/>
                            </div>
                            <div class="menu-text">
                                <textarea placeholder="What's up?" cols="30" rows="10"></textarea>
                            </div>
                            <div class="button">
                                <input type="button" value="Send" class="but-box"/></input>
                            </div>
                    </form>
                    <hr  class="hr1"/>
                    <div class="menu-icon">
                        <ul>
                            <li class="bkc1">
                                <a href="" class="iconfont icon-facebook"></a>
                            </li>
                            <li class="bkc2">
                                <a href="" class="iconfont icon-linkedin-in"></a>
                            </li>
                            <li class="bkc3">
                                <a href="" class="iconfont icon-twitter"></a>
                            </li>
                            <li class="bkc4">
                                <a href="" class="iconfont icon-github"></a>
                            </li>
                            <li class="bkc4">
                                <a href="" class="iconfont icon-codepen"></a>
                            </li>
                            <li class="bkc5">
                                <a href="" class="iconfont icon-youjian"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </header>
    <div class="content">
        <span>mjau-mjau</span>
        <p>
            Technology, say hello to design — Interactive design blog and
            playground.
        </p>
        <hr>
        <div class="content-essay-row">
            <div class="essay-mid-column">
                    <div class="essay-title">
                        <h2>Introducing Files App</h2>
                        <h6><span class="iconfont icon-shijian"></span>2年之前</h6>
                    </div>
                    <img src="./img/files-app.jpg" alt="" srcset="" />
                    <p><strong>Files</strong> is a single-file PHP script that can be dropped into any dir on server,
                        instantly creating a beautiful gallery of files and folders.</p>
            </div>
            <div class="essay-mid-column">
                    <div class="essay-title">
                        <h2>Cloudflare Page Caching</h2>
                        <h6><span class="iconfont icon-shijian"></span>7年之前</h6>
                    </div>
                    <img src="./img/the_vehicle.jpg" alt="" srcset="" />
                    <p>Cloudflare does not cache web pages by default, but by applying a page-rule, you can also serve
                        pages at blazing speeds from the Cloudflare CDN.</p>
            </div>
            <div class="essay-mid-column">
                    <div class="essay-title">
                        <h2>Ajax Universal Analytics</h2>
                        <h6><span class="iconfont icon-shijian"></span>7年之前</h6>
                    </div>
                    <img src="./img/3.evening.jpg" alt="" srcset="" />
                    <p>With the availability of html5 and ajax websites on the rise, how to elegantly integrate Google
                        Universal Analytics into single page javascript applications?</p>
            </div>
        </div>
    </div>
    <footer>
        <div class="footer-top"><span class="iconfont icon-xiangshang"></span></div>
        <div class="footer-icon">
            <a href="" class="iconfont icon-facebook"></a>
            <a href="" class="iconfont icon-linkedin-in"></a>
            <a href="" class="iconfont icon-twitter"></a>
            <a href="" class="iconfont icon-github"></a>
            <a href="" class="iconfont icon-codepen"></a>
            <a href="" class="iconfont icon-folder"></a>
            <a href="" class="iconfont icon-feed"></a>
            <a href="" class="iconfont icon-youjian"></a>
        </div>
        <p>
            Made with <span class="p-2">Photo Gallery</span>
            <span class="iconfont icon-xin"></span>
        </p>
    </footer>
</body>

</html>